<template>
    <p>Vuex</p>
    <p>count1:{{ this.$store.state.count }}</p>
    <p>count2:{{ count }}</p>
    <p>{{ test }}</p>
    <p>countAlias:{{ countAlias }}</p>
    <p>getters</p>
    <p>countAddFive:{{ countAddFive }}</p>
    <p>countAddFiveAddTen:{{ countAddFiveAddTen }}</p>
    <p>countAddAlias:{{ countAddAlias }}</p>
    <p>Mutations</p>
    <button @click="addMut">addMut</button>
    <button @click="addPlayloadMut">addPlayloadMut</button>
    <button @click="add">add</button>
    <button @click="addCommit">addCommit</button>
    <button @click="addAlias">addAlias</button>

    <p>actions</p>
    <button @click="addActionMut">addActionMut</button>
    <button @click="asyncAddActionMut">asyncAddActionMut</button>
    <button @click="asyncAddPloyloadActionMut">asyncAddPloyloadActionMut</button>
    <button @click="addAction">addAction</button>
    <button @click="addActionDispatch">addActionDispatch</button>
    <button @click="addActionAlias">addActionAlias</button>
    

    <p>模块==============</p>
    <p>模块B中的state数据: {{ $store.state.b.countB }}</p>
    <p>模块B中的getters数据: {{ $store.getters['b/countBB'] }}</p>
    <button @click="commitIncreaseB">触发-moduleB-mutations</button>
    <button @click="commitAsyncIncreaseB">触发-moduleB-actions</button>
</template>

<script>
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default{
    computed:{
        //count(){
            //return this.$store.state.count
        //},
        //数组形式
        //...mapState(['count','test'])
        ...mapState({
            //count:state => state.count
            count:'count',
            test:'test',
            countAlias:'count'
        }),
        //countAddFive(){
        //    return this.$store.getters.countAddFive
        //},
        //countAddFiveAddTen(){
        //    return this.$store.getters.countAddFiveAddTen
        //}
        //数组写法
        //...mapGetters（['countAddFive','countAddFiveAddTen']）
        ...mapGetters({
            countAddFive:'countAddFive',
            countAddFiveAddTen:'countAddFiveAddTen',
            countAlias:'countAddFive'
        })
    },
    methods:{
        addMut(){
            this.$store.commit('add')
        },
        addPlayloadMut(){
            this.$store.commit('addPlayload',{num:10})
        },
        //...mapMutations(['add','addPlayload']),
        addCommit(){
            this.addPlayload({num:20})
        },
        ...mapMutations({
            add:'add',
            addAlias:'add',
            addPlayload:'addPlayload'
        }),

        addActionMut(){
            this.$store.dispatch('addAction')
        },
        asyncAddActionMut(){
            this.$store.dispatch('asyncAddAction')
        },
        asyncAddPloyloadActionMut(){
            this.$store.dispatch('asyncAddPloyloadAction',{num:20})
        },
        //...mapActions(['addAction','asyncAddPloyloadAction']),
        addActionDispatch(){
            this.asyncAddPloyloadAction({num:30})
        },
        ...mapActions({
            addAction:'addAction',
            addActionAlias:'addAction',
            asyncAddPloyloadAction:'asyncAddPloyloadAction'
        })
        //add(state){
        //    state.count++
        //},
        //addPlayload(state,playload){
        //    state.count +=playload.num
        //}
        //asyncAddPloyloadAction({commit},playload){
        //    setTimeout(()=>{
        //        commit('addPlayload',playload)
        //    },1000)
        //},
        //addAction({commit}){
        //    commit('add')
        //},
    },
    mounted(){
        console.log(this.$store);
    }
}
</script>